<template>
  <div>
    <el-card shadow="never">
      <header-title title="活动详情"></header-title>
    </el-card>
    <el-row :gutter="28">
      <el-col :span="6">
        <div v-if="flag1">
          <mycard :data="modal1"></mycard>
        </div>
      </el-col>
      <el-col :span="6">
        <div v-if="flag2">
          <mycard :data="modal2"></mycard>
        </div>
      </el-col>
      <el-col :span="6">
        <div v-if="flag3">
          <mycard :data="modal3"></mycard>
        </div>
      </el-col>
      <el-col :span="6">
        <div v-if="flag4">
          <mycard :data="modal4"></mycard>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import CountUp from '@/components/CountUp/index'
import CardItem from '@/components/CardItem/index.vue'
import mycard from './mycard'
import { isNil } from "@/utils"
export default {
  name: 'activityDetail',
  components:{
    HeaderTitle,
    CountUp,
    CardItem,
    mycard
  },
  data(){
    return {
      flag1: false,
      flag2: false,
      flag3: false,
      flag4: false,
      businessId: 0,
      modal1: {},
      modal2: {},
      modal3: {},
      modal4: {}
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.getaDetailList(this.businessId)
    }
  },
  mounted(){
    const query = this.$route.query.activityDetails
    this.businessId = query.businessId
    this.getaDetailList(this.businessId)
  },
  methods: {
    defaultValue (value, defaultValue) {
      if (isNil(value)) {
        return defaultValue
      }
      return value
    },
    // 获取 活动列表 详情
    getaDetailList(businessId){
      this.$store.dispatch('activity/fetchaDetail',{
        businessId
      }).then(
        data => {
          data.data1 ? this.flag1 = true : this.flag1 = false
          data.data2 ? this.flag2 = true : this.flag2 = false
          data.data3 ? this.flag3 = true : this.flag3 = false
          data.data4 ? this.flag4 = true : this.flag4 = false
          this.modal1 = data.data1
          this.modal1.totalSaleAmount = (data.data1.totalSaleAmount / 100).toFixed(2)
          this.modal1.averageConsumption = (data.data1.averageConsumption / 100).toFixed(2)
          this.modal2 = data.data2
          this.modal2.totalSaleAmount = (data.data1.totalSaleAmount / 100).toFixed(2)
          this.modal2.averageConsumption = (data.data1.averageConsumption / 100).toFixed(2)
          this.modal3 = data.data3
          this.modal3.totalSaleAmount = (data.data1.totalSaleAmount / 100).toFixed(2)
          this.modal3.averageConsumption = (data.data1.averageConsumption / 100).toFixed(2)
          this.modal4 = data.data4
          this.modal4.totalSaleAmount = (data.data1.totalSaleAmount / 100).toFixed(2)
          this.modal4.averageConsumption = (data.data1.averageConsumption / 100).toFixed(2)
        }
      ).catch(err => {
        // this.modal1 = {}
        // this.modal2 = {}
        // this.modal3 = {}
        // this.modal4 = {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
